<template>
    <z-paging>
        <u-sticky>
            <view class="heqader_box">
                <hedsty :headCentext="'福利房'"></hedsty>
            </view>
        </u-sticky>
        <view class="top_title_box" style="background-image: url('https://morgan.dingxians.cn/static/fuyuri/13.png');">
            <view class="left_piuc_box">
                <image :src="housdetailobj.avatar" mode="scaleToFill" />
            </view>
            <view class="center_t_bx">
                <view class="one_bpox">{{ housdetailobj.nickname }}</view>
                <view class="two_bpox">{{ housdetailobj.end_at }} 开赏</view>
                <view class="thr_bpox">在规定时间内在擂台赛（新/旧）达到{{ housdetailobj.amount }}流水即可进入</view>
            </view>
            <view class="left_t_box">积分房</view>
        </view>
        <view class="content_box" style="background-image: url('https://morgan.dingxians.cn/static/fuyuri/12.png');">
            <view class="spoil_title_box">赏品池</view>
            <view class="context_box">{{ swiper.list[swiper.index].goods_name }} </view>
            <view class="swiper_box">
                <!-- #ifndef MP-ALIPAY -->
                <swiper class="swiper" :previous-margin="swiper.margin" autoplay :next-margin='swiper.margin'
                    :circular="true" @change="swiperChange">
                    <swiper-item v-for="(item, index) in swiper.list" :key="index">
                        <image class='le-img' :src='item.image' :class="{ 'le-active': swiper.index == index }">
                        </image>
                    </swiper-item>
                </swiper>
                <!-- #endif -->
                <!-- #ifdef MP-ALIPAY -->
                <swiper class="swiper1" :circular="true" @change="swiperChange">
                    <swiper-item class="swiper-item1" v-for="(item, index) in swiper.list" :key="index">
                        <image :src='item.image' mode="scaleToFill"></image>
                    </swiper-item>
                </swiper>
                <!-- #endif -->
                <view class="dange_prize_box">价格：{{ swiper.list[swiper.index].recovery_price }}</view>
                <view class="dange_zopngjiprize_box">共{{ housdetailobj.prize_num }}件，总价值<text
                        style="color:rgba(253, 13, 52, 1)"> {{
                            housdetailobj.prize_total_amount }}</text>元素
                </view>

            </view>
            <view class="chaklansuopyou_box"
                style="background-image: url('https://morgan.dingxians.cn/static/fuyuri/10.png');"></view>
        </view>
        <view class="renshunums_box" style="background-image: url('https://morgan.dingxians.cn/static/fuyuri/13.png');">
            <view class="one_box">
                <view class="l_t_bvox">参与热度</view>
                <view class="r_t_bvox">{{ housdetailobj.participation_num }}热度 <text style="color:#E89532;" @click="$router('/userPage/fuyuri/zjlb?id=' + housdetailobj.id)" v-if="housdetailobj.is_finish == 2">（查看中奖记录）</text> </view>
            </view>
            <view class="canyuytouxian_bipx">
                <view class="dage_box" v-for="(item, index) in housdetailobj.participation_list" :key="index">
                    <view class="top_box" :style="{ border: '2px solid' + (item.is_winner == 1 ? '#E89532' : '') }">
                        <image :src="item.avatar" mode="scaleToFill" />
                        <view class="zhong" v-if="item.is_winner == 1">中奖</view>
                    </view>
                    <view class="nam_box">{{ item.nickname }}</view>
                </view>
            </view>
        </view>
        <view style="height: 172rpx;"></view>
        <view class="jion_box">
            <view class="topenm_box">距离开赏还有：<uni-countdown splitorColor="#ffffff" color="#ffffff" :day="days"
                    :hour="hours" :minute="minutes" :second="seconds"></uni-countdown></view>
            <view class="jiaruananniu_box"
                style="background-image: url('https://morgan.dingxians.cn/static/fuyuri/11.png');" @click="jionBtn"
                v-if="housdetailobj.is_exist == 1">
                加入房间
            </view>
            <view class="jiaruananniu_box"
                style="background-image: url('https://morgan.dingxians.cn/static/fuyuri/11.png');" v-if="housdetailobj.is_exist == 0 && housdetailobj.is_finish == 1">
                已加入
            </view>
            <view class="jiaruananniu_box"
                style="background-image: url('https://morgan.dingxians.cn/static/fuyuri/11.png');" v-if="housdetailobj.is_finish == 2">
                已结束
            </view>
        </view>
        <u-popup :show="pawshow" mode="center" bgColor="transparent">
            <view class="bg_box" style="background-image: url('https://morgan.dingxians.cn/static/fuyuri/20.png');">
                <view class="top_text_box">输入密码</view>
                <view class="guanbi_box"
                    style="background-image: url('https://morgan.dingxians.cn/static/fuyuri/21.png');"
                    @click="pawshow = false"></view>
                <view class="input_pawws_box">
                    <u--input type="text" fontSize="14" color="#fff" placeholder="请输入密码" :value="pawValue"
                        @change="pawchange"></u--input>
                </view>
                <view class="enter_box"
                    style="background-image: url('https://morgan.dingxians.cn/static/fuyuri/19.png');" @click="enter">
                </view>
            </view>
        </u-popup>

    </z-paging>
</template>
<script>
import hedsty from '../../components/hedsty.vue'
export default {
    components: {
        hedsty
    },
    data() {
        return {
            swiper: {
                margin: "150rpx",
                index: 0,
                list: [
                    {
                        id: 1,
                        image: 'https://yq.dingxians.cn/upload/20240910/66dfea3437983.png',
                        goods_name: '',
                        price: ''
                    },
                    {
                        id: 2,
                        image: 'https://yq.dingxians.cn/upload/20240910/66dff046e5051.png',
                        goods_name: '',
                        price: ''
                    },
                    {
                        id: 3,
                        image: 'https://yq.dingxians.cn/upload/20240910/66dfeec258cc9.png',
                        goods_name: '',
                        price: ''
                    },
                    {
                        id: 4,
                        image: 'https://yq.dingxians.cn/upload/20240910/66dfea1951268.png',
                        goods_name: '',
                        price: ''
                    }
                ]
            },
            pawshow: false,
            pawValue: '',
            days: '',
            hours: '',
            minutes: '',
            seconds: '',
            roomId: '',
            housdetailobj: {}
        }
    },
    onLoad(e) {
        this.roomId = e.id
    },
    onShow() {
        this.getDetail()
    },
    methods: {
        swiperChange: function (e) {
            this.swiper.index = e.detail.current;
        },
        jionBtn() {
            if (this.housdetailobj.room_password) {
                this.pawshow = true
            } else {
                this.jionData()
            }
        },
        pawchange(e) {
            this.pawValue = e
        },
        getDetail() {
            this.$Request.get(this.$api.flw.wealRooms + `/${this.roomId}`).then(res => {
                if (res.code == 200) {
                    console.log(res)
                    this.housdetailobj = res.data
                    this.swiper.list = res.data.prize_list
                    this.days = res.data.days
                    this.hours = res.data.hours
                    this.minutes = res.data.minutes
                    this.seconds = res.data.seconds
                    this.milliseconds = res.data.milliseconds
                }
            })
        },
        enter() {
            this.jionData()
            this.pawshow = false
        },
        jionData() {
            let data = {
                weal_room_id: this.roomId,
                room_password: this.pawValue,
            }
            this.$Request.post(this.$api.flw.wealRoomsParticipation, data).then(res => {
                if (res.code == 200) {
                    this.$msg(res.msg)
                    this.getDetail()
                }

            })
        },
    }
}
</script>
<style lang="scss" scoped>
/deep/.u-count-down__text {
    color: #fff !important;
}

.heqader_box {
    width: 750rpx;
    height: 447rpx;
}

.top_title_box {
    width: 697rpx;
    height: 320rpx;
    background-size: 100% 100%;
    margin: auto;
    margin-top: -250rpx;
    box-sizing: border-box;
    padding-top: 75rpx;
    padding-left: 41rpx;
    padding-right: 34rpx;
    display: flex;
    justify-content: flex-start;
    position: relative;
    margin-bottom: 36rpx;

    .left_t_box {
        position: absolute;
        height: 27rpx;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #EED6C7;
        line-height: 27rpx;
        right: 36rpx;
        top: 84rpx;

    }

    .left_piuc_box {
        width: 140rpx;
        height: 140rpx;
        border-radius: 5rpx;
        margin-right: 29rpx;
        background-color: #fff;

        image {
            width: 140rpx;
            height: 140rpx;
            border-radius: 5rpx;
        }
    }

    .center_t_bx {
        box-sizing: border-box;
        padding-top: 8rpx;

        .one_bpox {
            height: 31rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 32rpx;
            color: #EED6C7;
            line-height: 31rpx;
            margin-bottom: 21rpx;
        }

        .two_bpox {
            height: 23rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #EED6C7;
            line-height: 23rpx;
            margin-bottom: 24rpx;
        }

        .thr_bpox {
            width: 439rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #EED6C7;
        }
    }
}

.content_box {
    width: 690rpx;
    height: 883rpx;
    background-size: 100% 100%;
    margin: auto;
    box-sizing: border-box;
    padding-top: 58rpx;
    margin-bottom: 31rpx;

    .spoil_title_box {
        width: 100%;
        height: 48rpx;
        font-family: test1;
        font-weight: bold;
        font-size: 52rpx;
        color: #FFEDD7;
        text-align: center;
        margin-bottom: 30rpx;
    }

    .context_box {
        width: 100%;
        height: 48rpx;
        text-align: center;
        box-sizing: border-box;
        padding: 0 69rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #EED6C7;
        line-height: 48rpx;
    }

    .swiper_box {
        width: 100%;
        height: 476rpx;
        box-sizing: border-box;
        padding: 0 69rpx;
        margin: auto;
        margin-bottom: 39rpx;

        .swiper {
            height: 399rpx;
            margin: 0 20rpx;

            .le-img {
                width: 100%;
                height: 399rpx;
                display: block;
                transform: scale(0.8);
                transition: transform 0.3s ease-in-out 0s;
                border-radius: 4px;

                &.le-active {
                    transform: scale(1);
                }
            }

            .housing_box {
                width: 100%;
                height: 31rpx;
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 32rpx;
                color: #FFFFFF;
                line-height: 31rpx;
            }

        }

        .swiper1 {
            width: 300rpx;
            height: 476rpx;
            margin: auto;
        }

        .swiper-item1 {
            display: block;
            height: 376rpx;
            line-height: 300rpx;
            text-align: center;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .dange_prize_box {
            width: 100%;
            height: 31rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 32rpx;
            color: #EED6C7;
            line-height: 31rpx;
            text-align: center;
            margin-bottom: 28rpx;
        }

        .dange_zopngjiprize_box {
            width: 100%;
            height: 28rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 32rpx;
            color: #EED6C7;
            line-height: 28rpx;
            text-align: center;
            margin-bottom: 37rpx;
        }
    }

    .chaklansuopyou_box {
        width: 581rpx;
        height: 130rpx;
        background-size: 100% 100%;
        margin: auto;
    }
}

.renshunums_box {
    width: 697rpx;
    height: 320rpx;
    background-size: 100% 100%;
    margin: auto;
    padding-top: 72rpx;

    .one_box {
        width: 100%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 33rpx;
        margin-bottom: 54rpx;

        .l_t_bvox,
        .r_t_bvox {
            // width: 110rpx;
            height: 27rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #FFFFFF;
            line-height: 27rpx;
        }
    }

    .canyuytouxian_bipx {
        width: 100%;
        height: 150rpx;
        display: flex;
        justify-content: flex-start;
        box-sizing: border-box;
        padding: 0 53rpx;
        overflow: hidden;
        overflow-x: auto;

        .dage_box {
            width: 100rpx;
            height: 136rpx;
            margin-right: 28rpx;

            .top_box {
                width: 100rpx;
                height: 100rpx;
                border-radius: 50%;
                margin-bottom: 13rpx;
                position: relative;

                .zhong {
                    position: absolute;
                    bottom: 2rpx;
                    left: 0;
                    right: 0;
                    margin: auto;
                    width: 80rpx;
                    height: 30rpx;
                    border-radius: 10rpx;
                    text-align: center;
                    line-height: 30rpx;
                    font-size: 20rpx;
                    color: #fff;
                    background-color: #E89532;
                }

                image {
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 50%;
                }
            }

            .nam_box {
                width: 100%;
                box-sizing: border-box;
                padding: 0 5rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                // height: 23rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #FFFFFF;
                // line-height: 23rpx;
            }
        }
    }
}

.jion_box {
    width: 750rpx;
    height: 172rpx;
    position: fixed;
    bottom: 0;
    background-color: rgba(28, 8, 2, 1);
    box-sizing: border-box;
    padding: 0 30rpx;

    .topenm_box {
        height: 80rpx;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #FFFFFF;
        line-height: 80rpx;
        display: flex;
        align-items: center;
    }

    .jiaruananniu_box {
        position: absolute;
        width: 230rpx;
        height: 90rpx;
        background-size: 100% 100%;
        right: 30rpx;
        top: 6rpx;
        text-align: center;
        line-height: 90rpx;
        font-family: text1;
        font-weight: bold;
        font-size: 28rpx;
        color: #FFEDD7;
    }
}

.bg_box {
    width: 580rpx;
    height: 470rpx;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 35rpx 0;
    position: relative;

    .top_text_box {
        width: 100%;
        font-family: text1;
        font-weight: normal;
        font-size: 60rpx;
        color: #FFEDD7;
        font-style: italic;
        text-align: center;
        margin-bottom: 86rpx;
    }

    .guanbi_box {
        width: 60rpx;
        height: 60rpx;
        background-size: 100% 100%;
        position: absolute;
        top: 36rpx;
        right: 20rpx;
    }

    .input_pawws_box {
        width: 520rpx;
        height: 80rpx;
        background: rgba(22, 1, 4, .5);
        margin: auto;
        border-radius: 10rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 60rpx;
    }

    .enter_box {

        width: 447rpx;
        height: 100rpx;
        background-size: 100% 100%;
        margin: auto;
    }
}
</style>